<template>
  <div>
    <div style="padding-bottom: 20px; color: #0000FF;" @click="closePage">&lt;商品管理</div>
    <div class="information_edit">
      <div class="page_top padding_20">发布商品</div>
      <div class="page_content padding_20">
        <div class="content_title"><span>基本信息</span></div>
        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;">
            <span style="font-size:14px;margin-right: 10px;">关联资讯</span><span class="must_icon">必填</span>
            <span style="font-size:12px;color: #ccc;margin-left: 10px;">关联资讯后系统可自动生成商品信息，如无对应资讯，则可在商家描述中自行添加</span>
          </div>
          <div class="ad_item">
            <!-- <el-dropdown @command="informationClick">
              <el-button style="border-color: #409EFF;color: #409EFF;">
                关联资讯<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in informations" :key="item.id" :command="item">{{ item.title }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
            <el-select ref="chooseinforma" v-model="chooseinforma" filterable placeholder="请选择" @change="onSelectInfo">
              <el-option
                v-for="item in informations"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
            <!-- <div style="display: flex;flex: 1;align-items: center;border: 1px solid #ccc;margin-left: 10px;">
              <span style="color: #ccc;text-indent: 10px;">{{ chooseinforma? chooseinforma.title :'尚未关联资讯' }}</span>
            </div> -->
          </div>
        </div>

        <div style="padding-bottom: 20px;">
          <div class="ad_item" style="align-items: center;"><span style="font-size: 14px;">标题</span><span class="must_icon">必填</span></div>
          <el-input ref="title" v-model="title" placeholder="请输入内容" />
        </div>

        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;">
            <span style="font-size:14px;">销售规格</span>
            <span class="must_icon">必填</span>
            <span style="font-size:12px;color: #ccc;margin-left: 10px;">一款商品最多20种规格，为空即为不限制，补款会根据定价自动计算，现货规格定价为必填项</span>
          </div>
          <div class="">
            <div style="margin-bottom: 10px;">
              <el-button style="border-color: #409EFF;color: #409EFF;" @click="detailsDraftAddAll('1')">新增现货规格</el-button>
              <el-button style="border-color: #409EFF;color: #409EFF;" @click="detailsDraftAddAll('2')">新增预定规格</el-button>
            </div>
            <el-table
              v-if="tableData.length != 0"
              ref="multipleTable"
              stripe
              border
              :data="tableData"
              tooltip-effect="dark"
              :cell-class-name="addClass"
              style="width: 100%;font-size: 14px;"
            >
              <el-table-column
                type="index"
                :index="indexMethod"
                prop="name"
                label="规格标题"
                width="180"
              >
                <template slot="header" slot-scope="scope">
                  <i class="red">*</i> 规格标题
                </template>
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name" @blur="detailsDraftUpdateall(scope.$index)" />
                </template>
              </el-table-column>
              <el-table-column
                prop="type"
                label="类型"
              >
                <template slot-scope="scope">
                  {{ scope.row.type == 1 ? '现货' : '预定' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="oldmoney"
                label="原价(元)"
                width="100"
              >
                <template slot-scope="scope">
                  <!-- 如果是预定了 且定价大于0  那这个定价不让他改 直接置灰好了 现货无所谓 还是可以改的 -->
                  <!-- <el-input :disabled="scope.row.type === '2' && Number(scope.row.oldmoney) !== 0" v-model="scope.row.oldmoney" @blur="detailsDraftUpdateall(scope.$index)" /> -->
                  <el-input v-model="scope.row.oldmoney" @blur="detailsDraftUpdateall(scope.$index)" />
                </template>
              </el-table-column>
              <el-table-column
                prop="money"
                label="定价(元)"
                width="100"
              >
                <template slot-scope="scope">
                  <!-- 如果是预定了 且定价大于0  那这个定价不让他改 直接置灰好了 现货无所谓 还是可以改的 -->
                  <!-- <el-input :disabled="scope.row.type === '2' && Number(scope.row.money) !== 0" v-model="scope.row.money" @blur="detailsDraftUpdateall(scope.$index)" /> -->
                  <el-input v-model="scope.row.money" :disabled="scope.row.moneyDisabled" @blur="detailsDraftUpdateall(scope.$index)" />
                </template>
              </el-table-column>
              <el-table-column
                prop="num"
                label="库存"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.num" @blur="detailsDraftUpdateall(scope.$index)" />
                </template>
              </el-table-column>
              <el-table-column
                prop="quota"
                label="限购"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.quota" @blur="detailsDraftUpdateall(scope.$index)" />
                </template>
              </el-table-column>
              <el-table-column
                prop="endtime"
                label="截单日期"
                width="244"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.endtime"
                    type="date"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    @blur="detailsDraftUpdateall(scope.$index)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="deposit"
                label="定金(元)"
                width="90"
                show-overflow-tooltip
              >
                <template slot="header" slot-scope="scope">
                  <i class="red">*</i> 定金(元)
                </template>
                <template v-if="scope.row.type == 2" slot-scope="scope">
                  <el-input v-model="scope.row.deposit" @blur="detailsDraftUpdateall(scope.$index)" />
                </template>
              </el-table-column>
              <el-table-column
                prop="appointmenttime"
                label="定时开放购买"
                width="244"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.appointmenttime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="设定"
                    :picker-options="pickerOptions"
                    @blur="detailsDraftUpdateall(scope.$index)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="supplement"
                label="补款(元)"
                show-overflow-tooltip
              >
                <template v-if="scope.row.type == 2" slot-scope="scope">
                  <!-- <el-input @blur="detailsDraftUpdateall(scope.$index)" v-model="scope.row.supplement"></el-input> -->
                  {{ (scope.row.money - scope.row.deposit).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="isopen"
                label="开启补款"
                width="120"
                show-overflow-tooltip
              >
                <template v-if="scope.row.type == 2" slot-scope="scope">
                  <el-select v-model="scope.row.isopen" filterable placeholder="请选择" @change="detailsDraftUpdateall(scope.$index, $event)">
                    <el-option
                      label="开启"
                      value="1"
                    />
                    <el-option
                      label="关闭"
                      value="2"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="supplementdate"
                label="小于该范围可补款"
                width="244"
                show-overflow-tooltip
              >
                <template v-if="scope.row.type == 2" slot-scope="scope">
                  <el-date-picker
                    :disabled="scope.row.isopen==='2'"
                    v-model="scope.row.supplementdate"
                    type="date"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd"
                    @blur="detailsDraftUpdateall(scope.$index)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="supplementenddate"
                label="补款截止"
                width="244"
                show-overflow-tooltip
              >
                <template v-if="scope.row.type == 2" slot-scope="scope">
                  <el-date-picker
                    :disabled="scope.row.isopen==='2'"
                    v-model="scope.row.supplementenddate"
                    type="date"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd"
                    :picker-options="endPickerOptions"
                    @blur="detailsDraftUpdateall(scope.$index)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="overtype"
                label="本次超时算弃单"
                width="200"
                show-overflow-tooltip
              >
                <template v-if="scope.row.type == 2" slot-scope="scope">
                  <el-select v-model="scope.row.overtype" filterable placeholder="请选择" @blur="detailsDraftUpdateall(scope.$index)">
                    <el-option
                      label="否"
                      value="1"
                    />
                    <el-option
                      label="是且定金不退"
                      value="2"
                    />
                    <el-option
                      label="是且退定金"
                      value="3"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                label="操作"
                width="100"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="detailsDraftDelall(scope.row.specsid,scope.$index)">删除</el-button>
                  <i class="el-icon-caret-top" @click="detailsDraftMoveall(scope.row.specsid,scope.$index,1)" />
                  <i class="el-icon-caret-bottom" @click="detailsDraftMoveall(scope.row.specsid,scope.$index,2)" />
                </template>
              </el-table-column>
            </el-table>

          </div>
        </div>

        <!-- <div style="padding-bottom: 20px;">
          <div class="ad_item" style="align-items: center;">
            <span style="font-size:14px;margin-right: 10px;">补款时间</span>
            <span style="font-size:12px;color: #ccc;">一旦设定好补款发货时间，时间到达后满足补款条件的用户即可开始补款</span>
          </div>
          <el-radio-group v-model="supplementtype">
            <el-radio :label="1">
              未开启
            </el-radio>
            <el-radio :label="2">
              <el-date-picker
                v-model="supplementtime"
                :disabled="supplementtype!=2"
                type="datetime"
                placeholder="选择日期时间"
              />
            </el-radio>
          </el-radio-group>
        </div> -->
      </div>
      <div class="page_content padding_20">
        <div class="content_title"><span>补充信息</span></div>
        <div class="page_content_tit">
          <span>商品封面</span><span class="must_icon">必填</span>
          <span style="font-size: 14px;color: #ccc;">720X720PX的图像最佳，大小请不要超过3M</span>
        </div>
        <div style="display: flex;">
          <el-upload
            class="avatar-uploader"
            accept="image/png,image/jpeg,image/gif"
            action="#"
            :show-file-list="false"
            :on-change="beforeAvatarUpload"
            :auto-upload="false"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>

        </div>
        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;"><span>上架时间</span><span class="must_icon">必填</span></div>
          <el-radio-group v-model="isupper">
            <el-radio :label="1">
              立即上架
            </el-radio>
            <el-radio :label="2">
              定时上架
              <el-date-picker
                v-model="shelftime"
                :disabled="isupper!=2"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                placeholder="选择日期时间"
              />
            </el-radio>
          </el-radio-group>
        </div>
        <!-- <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;"><span>分类</span><span class="must_icon">必填</span></div>
          <el-select v-model="commoditytypeid" placeholder="请选择" style="width: 120px;">
            <el-option
              v-for="item in typeoptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </div> -->

        <div style="padding: 20px 0;">
          <div class="ad_item" style="align-items: center;">
            <span style="font-size:14px;margin-right: 10px;">是否包邮</span>
            <span style="font-size:12px;color: #ccc;">不包邮会自动采用运费设置</span>
          </div>
          <el-radio-group v-model="isfreeshipping">
            <el-radio :label="0">不包邮</el-radio>
            <el-radio :label="1">包邮</el-radio>
          </el-radio-group>
        </div>

      </div>
      <div class="page_content padding_20">
        <div class="content_title"><span style="font-size: 14px;">商家描述</span><span style="color: #ccc;font-size: 10px;font-weight: 100;margin-left: 10px;">可不填写</span></div>
        <tinymce v-model="content" :height="300" />

      </div>
      <div class="page_foot padding_20">
        <div>
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="closePage">取消</el-button>
          <el-button type="primary" @click="commodityAddall(2)">存入草稿</el-button>
          <el-button type="primary" @click="commodityAddall(1)">发布</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {
  detailsDraftClean, getCommodityTypeOnList, getinformationList, detailsDraftAdd, detailsAdd,
  detailsDraftUpdate, detailsUpdate, detailsDraftMove, detailsMove, detailsDraftDel, detailsDel, commodityDetail,
  commodityAdd, commodityEdit, commodityDetailInitialize
} from '@/api/commodity'
import tinymce from '@/components/Tinymce'
import { parseTime } from '@/utils'
export default {
  components: { tinymce },
  props: {
    editdata: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          // console.log(time.getTime())
          return time.getTime() <= Date.now() - 24*60*60*1000;
        },
      },
      endPickerOptions: {
        disabledDate(time) {
          // console.log(time.getTime())
          return time.getTime() <= Date.now() + 6*24*60*60*1000;
        },
      },
      imageUrl: '',
      imgFile: '',

      informations: [],
      chooseinforma: '',
      tableData: [],
      content: '',
      title: '',
      commodityid: '',
      supplementtype: 1,
      supplementtime: '',
      isupper: 1,
      shelftime: '',
      typeoptions: [],
    //   commoditytypeid: '',
      isfreeshipping: 0
    }
  },
  created() {
    console.log('editdata', this.editdata)
    if (this.editdata) {
      this.commodityid = this.editdata.commodityid
      this.commodityDetail()
      this.commodityDetailInitialize()
    } else {
      this.detailsDraftClean()
    }
    this.getCommodityTypeOnList()
    this.getinformationList()
  },
  methods: {
    onSelectInfo(id) {
      // 获取选择的关联资讯图作为默认商品封面
      const selectInfo = this.informations.find(item => item.id === id)
      console.log('selectInfo', selectInfo)
      if(selectInfo) {
        this.imageUrl = selectInfo.img
      }
    },
    indexMethod(index) {
      return index
    },
    beforeAvatarUpload(file) {
      console.log(file)
      this.imgFile = file.raw
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    closePage() {
      this.$parent.closeEditpage()
      this.$router.push('/commodity/commodity/index') // 清除query data
    },
    detailsDraftClean() {
      detailsDraftClean().then()
    },
    addClass({ row, column, rowIndex, columnIndex }) {
    //   console.log(row, column, rowIndex, columnIndex)
      if (columnIndex == 1) {
        return 'cell-grey'
      }
      if (row.type == 1) {
        if (columnIndex === 6 || columnIndex === 7 || columnIndex === 8 || columnIndex === 9) {
          return 'cell-grey'
        }
      }
      if (row.type == 2) {
        if (columnIndex === 7) {
          return 'cell-grey'
        }
      }
    },
    detailsDraftAddAll(type) {
      if(this.tableData.length >= 20) {
        this.$message.error('商品规格最多只能添加20种')
        return
      }
      if (this.editdata) {
        this.detailsAdd(type)
      } else {
        this.detailsDraftAdd(type)
      }
    },
    detailsDraftAdd(type) {
      if(this.tableData.length >= 20) return
      detailsDraftAdd({ type: type }).then(response => {
        this.tableData.push({
          type: type,
          name: '',
          money: '',
          oldmoney: '',
          num: '',
          quota: '',
          endtime: '',
          appointmenttime: new Date(),
          deposit: '',
          supplement: '',
          supplementdate: parseTime(Date.now(), '{y}-{m}-{d}'),
          supplementenddate: parseTime(Date.now() + 30*24*60*60*1000, '{y}-{m}-{d}'),
          isopen: '2',
          overtype: '1',
          specsid: response.detail.specsid
        })
      })
    },
    detailsAdd(type) {
      if(this.tableData.length >= 20) return
      detailsAdd({ commodityid: this.commodityid, type: type }).then(response => {
        this.tableData.push({
          type: type,
          name: '',
          money: '',
          oldmoney: '',
          num: '',
          quota: '',
          endtime: '',
          appointmenttime: '',
          deposit: '',
          supplement: '',
          supplementdate: parseTime(Date.now(), '{y}-{m}-{d}'),
          supplementenddate: parseTime(Date.now() + 30*24*60*60*1000, '{y}-{m}-{d}'),
          isopen: '2',
          overtype: '1',
          specsid: response.detail.specsid
        })
      })
    },
    checkTable(index) {
      // 校验定价、库存、限购大于0
      const rowData = this.tableData[index]
    //   console.log('rowData', rowData, Number(rowData.money), Number(rowData.num), Number(rowData.quota))
      if(rowData.type === '1' && Number(rowData.money) < 0) {
        this.$message.error('现货规格定价必须大于等于0，请重新设置')
        return false
      } else if(rowData.type === '1' && Number(rowData.oldmoney) < 0) {
        this.$message.error('现货规格原价必须大于等于0，请重新设置')
        return false
      } else if(Number(rowData.num) < 0) {
        this.$message.error('库存必须大于等于0，请重新设置')
        return false
      } else if(Number(rowData.quota) < 0) {
        this.$message.error('限购必须大于等于0，请重新设置')
        return false
      } else if(Number(rowData.quota) > Number(rowData.num)) {
        this.$message.error('限购数量不能大于库存数量，请重新设置')
        return false
      } else {
        return true
      }
    },
    detailsDraftUpdateall(index) {
      // 校验表格数据
      if(!this.checkTable(index)) return
      if (this.editdata) {
        this.detailsUpdate(index)
      } else {
        this.detailsDraftUpdate(index)
      }
    },
    detailsDraftUpdate(index) {
      detailsDraftUpdate(this.tableData[index]).then(response => {
        if(response.detail.status !== 1) {
          this.$message.error(response.msg)
        }
        // 如果是预定了 且定价大于0  那这个定价不让他改 直接置灰好了 现货无所谓 还是可以改的
        this.$set(this.tableData[index], 'moneyDisabled', this.tableData[index].type === '2' && Number(this.tableData[index].money) !== 0)
      })
    },
    detailsUpdate(index) {
      console.log('this.tableData[index]', this.tableData[index])
      detailsUpdate(this.tableData[index]).then(response => {
        if(response.detail.status !== 1) {
          this.$message.error(response.msg)
        }
        // 如果是预定了 且定价大于0  那这个定价不让他改 直接置灰好了 现货无所谓 还是可以改的
        this.$set(this.tableData[index], 'moneyDisabled', this.tableData[index].type === '2' && Number(this.tableData[index].money) !== 0)
      })
    },
    detailsDraftDelall(specsid, index) {
      if (this.editdata) {
        this.detailsDel(specsid, index)
      } else {
        this.detailsDraftDel(specsid, index)
      }
    },
    detailsDraftDel(specsid, index) {
      this.$confirm('此操作将删除该模块, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        detailsDraftDel({ 'specsid': specsid }).then(res => {
          if(res.detail.status === 2) {
            this.$message.error(res.msg || '有未完成或已关闭的订单,不可删除')
          } else {
            this.tableData.splice(index, 1)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    detailsDel(specsid, index) {
      this.$confirm('此操作将删除该模块, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        detailsDel({ 'specsid': specsid, commodityid: this.commodityid }).then(res => {
          if(res.detail.status === 2) {
            this.$message.error(res.msg || '有未完成或已关闭的订单,不可删除')
          } else {
            this.tableData.splice(index, 1)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    detailsDraftMoveall(specsid, index, status) {
      if (this.editdata) {
        this.detailsMove(specsid, index, status)
      } else {
        this.detailsDraftMove(specsid, index, status)
      }
    },
    detailsDraftMove(specsid, index, status) {
      detailsDraftMove({ specsid: specsid, status: status }).then(res => {
        if (res.detail.length != 0) {
          console.log(res)
          if (status == 1) {
            this.tableData.splice(index, 1, ...this.tableData.splice(index - 1, 1, this.tableData[index]))
          } else {
            this.tableData.splice(index, 1, ...this.tableData.splice(index + 1, 1, this.tableData[index]))
          }
        }
      })
    },
    detailsMove(specsid, index, status) {
      detailsMove({ specsid: specsid, status: status, commodityid: this.commodityid }).then(res => {
        if (res.detail.length != 0) {
          console.log(res)
          if (status == 1) {
            this.tableData.splice(index, 1, ...this.tableData.splice(index - 1, 1, this.tableData[index]))
          } else {
            this.tableData.splice(index, 1, ...this.tableData.splice(index + 1, 1, this.tableData[index]))
          }
        }
      })
    },
    getinformationList() {
      getinformationList().then(response => {
        this.informations = response.detail.data
      })
    },
    getCommodityTypeOnList() {
      getCommodityTypeOnList().then(res => {
        this.typeoptions = res.detail.data
      })
    },
    checkParams() {
      // 关联资讯
      if(!this.chooseinforma) {
        this.$message.error('请先选择关联资讯')
        this.$refs.chooseinforma && this.$refs.chooseinforma.focus()
        return false
      } else if(!this.title) {        
        this.$message.error('请输入标题')
        this.$refs.title && this.$refs.title.focus()
        return false
      } else if(this.tableData.length === 0) {        
        this.$message.error('请添加销售规格')
        return false
      } else if(!this.imgFile && !this.imageUrl) {        
        this.$message.error('请添加商品封面')
        return false
      } else {
        return true
      }
    },
    // 检查是否有时间未填写
    hasNullDate() {
      let flagObj = { flag: false, msg: '' }
      for(let i = 0; i < this.tableData.length; i++) {
        const row = this.tableData[i]
        console.log(row.endtime, row.appointmenttime, row.supplementdate, row.supplementenddate)
        if(!row.endtime || !row.appointmenttime || !row.supplementdate || !row.supplementenddate) {
          flagObj.msg = `规格列表第${i+1}行`
          if(!row.endtime) {
            flagObj.msg += `[截单日期]`
          } else if(!row.appointmenttime) {
            flagObj.msg += '[定时开放购买时间]'
          } else if(!row.endtime) {
            flagObj.msg += '[小于该范围可补款时间]'
          } else if(!row.endtime) {
            flagObj.msg += '[补款截止时间]'
          }
          flagObj.flag = true
          break
        }
      }
      return flagObj
    },
    commodityAddall(type) {
      // 校验表格数据
      let checkTable = true
      for(let i = 0; i < this.tableData.length; i++) {
        if(!this.checkTable(i)) {
          checkTable = false
          break
        }
      }
      if(!checkTable) return
      // 参数校验
      if(!this.checkParams()) return
      // 判断是否有未填的时间，给用户提示
      const flagObj = this.hasNullDate()
      if(flagObj.flag) {
        this.$confirm(flagObj.msg + '为空则不限定, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.editdata) {
            this.commodityEdit(type)
          } else {
            this.commodityAdd(type)
          }
        }).catch(() => {})
      } else {
        if (this.editdata) {
          this.commodityEdit(type)
        } else {
          this.commodityAdd(type)
        }
      }
    },
    commodityAdd(type) {
      const self = this
      commodityAdd({
        frames: 1,
        title: self.title,
        informationid: self.chooseinforma,
        supplementtype: self.supplementtype,
        supplementtime: self.supplementtime,
        isupper: self.isupper,
        shelftime: self.shelftime,
        // commoditytypeid: self.commoditytypeid,
        content: self.content,
        type: type,
        files: self.imgFile,
        commodityid: self.commodityid,
        isfreeshipping: self.isfreeshipping
      }).then(response => {
        self.$message({
          message: '操作成功',
          type: 'success'
        })
        console.log(response, response.detail, response.detail.commodityid)
        this.$parent.successpage(response.detail.commodityid)
        // this.closePage()
        this.$parent.getData()
      })
    },
    commodityEdit(type) {
      const self = this
      commodityEdit({
        frames: 1,
        title: self.title,
        informationid: self.chooseinforma,
        supplementtype: self.supplementtype,
        supplementtime: self.supplementtime,
        isupper: self.isupper,
        shelftime: self.shelftime,
        // commoditytypeid: self.commoditytypeid,
        content: self.content,
        type: type,
        files: self.imgFile,
        commodityid: self.commodityid,
        isfreeshipping: self.isfreeshipping
      }).then(response => {
        self.$message({
          message: '操作成功',
          type: 'success'
        })
        this.$parent.successpage()
        // this.closePage()
        this.$parent.getData()
      })
    },
    commodityDetail() {
      const self = this
      commodityDetail({ commodityid: this.commodityid }).then(res => {
        this.title = res.detail.title
        self.chooseinforma = res.detail.informationid
        self.supplementtype = Number(res.detail.supplementtype)
        self.supplementtime = res.detail.supplementtime
        this.isupper = Number(res.detail.isupper)
        this.isfreeshipping = Number(res.detail.isfreeshipping)
        this.shelftime = res.detail.shelftime
        // self.commoditytypeid = res.detail.commoditytypeid
        self.content = res.detail.content
        self.imageUrl = res.detail.img
        this.tableData = res.detail.list
        this.tableData.forEach(item => {
          item.appointmenttime = item.appointmenttime === '0000-00-00 00:00:00' ? '' : item.appointmenttime
          item.supplementdate = item.supplementdate === '0000-00-00' ? '' : item.supplementdate
          item.endtime = item.endtime === '0000-00-00' ? '' : item.endtime
          item.supplementenddate = item.supplementenddate === '0000-00-00' ? '' : item.supplementenddate
          // 如果是预定了 且定价大于0  那这个定价不让他改 直接置灰好了 现货无所谓 还是可以改的
          // console.log(item, item.type === '2', Number(item.money) === 0)
          this.$set(item, 'moneyDisabled', item.type === '2' && Number(item.money) !== 0)
        })
      })
    },
    commodityDetailInitialize() {
      // const self = this
      commodityDetailInitialize({ commodityid: this.commodityid }).then(res => {

      })
    }
  }
}
</script>
<style>
	.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-table--enable-row-transition .el-table__body tr td.cell-grey{
    background: #f6f6f6;
  }
</style>
<style lang="less" scoped>
.edit-top {
  padding-bottom: 20px;
  color: #0000FF;
  background-color: #f1f1f1;
}
.padding_20{
	padding: 20px;
}
.must_icon{
	color: #fff;
	background: #FF4D51;
	padding: 4px;
	font-size: 12px;
}

.information_edit{
	border: 1px solid #ccc;
	background: #fff;
}

.page_top{
	font-size: 16px;
	font-weight: 600;
	border-bottom: 1px solid #ccc;
}
.page_content{
	border-bottom: 1px solid #ccc;
	.detail_content{
		.top_nav{
			margin: 10px 0 20px 0;
			.left{
				font-size: 14px;
				color: #ccc;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #ccc;
				border-bottom: none;
			}
			.right{
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				border-bottom: 1px solid #ccc;
			}
		}
		.detail_body{
			padding-left: 10px;
			.item{
				margin: 10px 0;
			}
		}
	}
}
.content_title{
	font-size: 16px;
	font-weight: 600;
	padding-bottom: 10px;
}
.page_content_tit{
	padding-bottom: 10px;
	display: flex;
	align-items: center;
}
.page_foot{
	display: flex;
	justify-content: flex-end;
}
.ad_item{
	display: flex;
	margin-bottom: 10px;
}

</style>
